<template>
	<view class="manager">
		<view class="mr-3 ml-3 recent-work-order">
			<view class="title">近7日工单量</view>
			<view class="echart-wrap">
				<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
			</view>
		</view>
		<view class="m-3 compony-menus">
			<view class="title">公司工单管理</view>
			<u-grid @click="handleMenuClick" :border="false" col="3">
				<u-grid-item v-for="(listItem, listIndex) in menulist" :key="listIndex">
					<u--image :showLoading="true" :src="listItem.iconImg" width="34px" height="34px"></u--image>
					<text class="grid-text">{{ listItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>

	</view>
</template>

<script>
import {
	getOrderReport
} from "@/apis/workOrder.js";
import { parseTime } from "@/util";

export default {
	data() {
		return {
			option: {},
			routeType: uni.getStorageSync('routeType') || 'Normal',
			menulist: [{
				iconImg: '/static/manager/enterOrder.png',
				pageUrl: 'OrderAdd',
				title: '录单'
			},
			{
				iconImg: '/static/manager/ghOrder.png',
				pageUrl: 'PublicOrderList',
				title: '公海订单'
			}, {
				iconImg: '/static/manager/pendingRefund.png',
				pageUrl: 'ArbitrateList',
				title: '待退款'
			}, {
				iconImg: '/static/manager/serving.png',
				pageUrl: 'AssList',
				title: '服务中'
			}, {
				iconImg: '/static/manager/settlementAudit.png',
				pageUrl: 'AuditList',
				title: '结算审核'
			}, {
				iconImg: '/static/manager/integrateQuery.png',
				pageUrl: 'OrderSearch',
				title: '综合查询'
			},
			],
		}
	},
	mounted() {
		this.fetchData()
	},
	methods: {
		async fetchData() {
			const oneWeekAgo = new Date();
			const res = await getOrderReport({
				StartDate: parseTime(oneWeekAgo.setDate(oneWeekAgo.getDate() - 7), "{y}-{m}-{d}"),
				EndDate: parseTime(new Date(), "{y}-{m}-{d}")
			})
			if (res.MsgCode != 0) return
			console.log('fetchData', res)
			const xData = []
			const yData = []
			res.data.CountList.map(item=>{
				xData.push( parseTime(item.CountDate, "{m}-{d}"))
				yData.push(item.TotalQty)
			})
			this.option = this.echartOption(xData,yData)
		},
		handleMenuClick(idx) {
			console.log('handleMenuClick', idx)
			const currItem = this.menulist[idx]
			uni.navigateTo({
				url: `/pages/repair/${this.routeType}/${currItem.pageUrl}`
			})
		},
		echartOption(xData,yData) {
			return {
				grid: {
					containLabel: true
				},
				tooltip: {
					show: true,
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: xData,
					// show: false
				},
				yAxis: {
					x: 'center',
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed',
							color: ['#416180']
						}
					}
					// show: false
				},
				series: [{
					name: '',
					type: 'line',
					smooth: true,
					data: yData,
					itemStyle: {
						normal: {
							color: '#F65D30',
							lineStyle: {
								color: '#F65D30'
							}
						}
					}
				},]
			};
		},

	}
}
</script>

<style lang="scss">
.manager {
	.title {
		color: #2C3542;
		font-size: 30rpx;
		margin-bottom: 46rpx
	}

	.recent-work-order {
		background-color: #fff;
		box-shadow: $s-bg-shadow;
		border-radius: 8rpx;
		padding: 32rpx;

		.echart-wrap {
			height: 524rpx;
			width: 117%;
			margin-left: -11%;
			margin-bottom: -15%;
			margin-top: -100rpx;
		}
	}

	.compony-menus {
		background-color: #fff;
		box-shadow: $s-bg-shadow;
		border-radius: $s-border-radius;
		padding: 32rpx;
	}
}

.grid-text {
	font-size: 14px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
</style>
